<template>
    <div>
        <div v-if="searchable" class="search-wrapper">
            <slot name="search"></slot>
            <Select class="search-select" placeholder="搜索字段" v-model="sKey" clearable>
                <Option v-for="item in searchItem" :value="item.key" :key="item.key">{{ item.title }}</Option>
            </Select>
            <Input class="search-input" v-model="sValue" placeholder="请输入"/>
            <Button @click="getSearchData" style="margin-left: 10px" type="primary">搜索</Button>
        </div>
        <Table border stripe ref="selection" :columns="columns" :data="tableData" style="overflow: visible">
        </Table>
        <Page style="margin-top:15px" :total="totalCount" :page-size="pageSize" @on-change="changePage"
              @on-page-size-change="nowPageSize"
              show-total :page-size-opts="[5, 10, 15]" show-elevator show-sizer/>
    </div>
</template>

<script>
    import axios from "@/api/instance"

    export default {
        name: "page-table",
        props: {
            value: {
                type: Array,
                default: () => []
            },
            searchable: {
                type: Boolean,
                default: false
            },
            columns: {
                type: Array,

            },
            size: {
                type: Number,
                default: 5
            },
            page: {
                type: Number,
                default: 0
            },
            requestUrl: {
                type: String
            },
            requestParam: {
                type: Object,
                default: () => {
                }
            },
            mapFun: {
                type: Function,
                default: (res) => {
                    let data = res.data || {}
                    return {
                        total: data.page.totalCount,
                        size: data.page.pageSize,
                        page: data.page.currPage,
                        data: data.page.list
                    }
                }
            },
            transform: {
                type: Function,
                default: (item) => item
            }
        },
        mounted() {
            this.getTableData()
        },
        data() {
            return {
                tableData: [],
                totalCount: 0,
                currPage: 0,
                pageSize: 5,
                sValue: null,
                sKey: null,
                param: {}
            }
        },
        methods: {
            getSearchData() {
                this.param = {
                    [this.sKey]: this.sValue
                }
                this.getTableData()
            },
            getTableData() {
                axios.get(this.requestUrl, {
                    params: {
                        page: this.currPage,
                        size: this.pageSize,
                        ...this.requestParam,
                        ...this.param
                    }
                }).then(r => this.mapFun(r))
                    .then(res => {
                        this.totalCount = res.total
                        this.pageSize = res.size
                        this.currPage = res.page
                        this.tableData = res.data.map(it => this.transform(it))
                        this.$emit('input', this.tableData)
                    }).catch(err => {
                    console.log(err)
                    this.tableData = []
                })
            },
            changePage(page) {
                this.currPage = page
                this.getTableData()
                this.$emit('on-change', page)
            },
            nowPageSize(size) {
                this.pageSize = size
                this.getTableData()
                this.$emit('on-page-size-change', size)
            }
        },
        watch: {
            size(v) {
                this.pageSize = v
            },
            page(v) {
                this.currPage = v
            },

        },
        computed: {
            searchItem() {
                return this.columns.filter(it => !it.notSearch)
            }
        }
    }
</script>

<style scoped lang="scss">
    .search-wrapper {
        margin: 10px 0;
    }

    .search-select {
        width: 200px;
        margin-left: 10px;
    }

    .search-input {
        width: 300px;
        margin-left: 10px;

    }
</style>
